<!DOCTYPE html>
<html>

<head>
    <title>海绵城市-Demo</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name='viewport' content='width=device-width,user-scalable=no'>
    <!-- <script src="https://cdn.bootcss.com/FileSaver.js/1.3.3/FileSaver.min.js"></script> -->
    <style>
    html,
    body {
        padding: 0px;
        margin: 0px;
    }

    .formpane {
        top: 10px;
        right: 10px;
        /* background: rgba(230, 230, 230, 0.85); */
    }

    .railLine {
        top: 10px;
        left: 10px;
        width: 170px;
        height: 200px;
    }
    </style>
    <script src="script/ht.js"></script>
    <script type="text/javascript">
    function init() {
        // 创建数据模型容器
        dataModel = new ht.DataModel();
        // 创建拓扑图组件
        graphView = new ht.graph.GraphView(dataModel);
        // 添加到数据模型容器
        graphView.addToDOM();
        //graphView.mi监听了moveEnd事件--點擊事件？
        graphView.mi(function(e) {
            console.log(e.kind)
            if (e.kind !== 'doubleClickData') return;
            var data = e.data;
            console.log(data)
        })

        // 數據請求
        ht.Default.xhrLoad('json/treatment2.json', function(res) {
            //序列化
            var json = ht.Default.parse(res);
            //反序列化数据到数据模型 (json, rootParent, setId)
            dataModel.deserialize(json);
            
            // 实现整体图元缩放到适配窗口的大小。
            graphView.fitContent(true);

        
            // console.log(res)

        })




        function updatePoolDeep(pools) {
            //更新蓄水池
        }



    }
    </script>
</head>

<body onload="init()">
</body>

</html>